<template>
  <div>
    <el-form @submit.native.prevent :inline="true" class="artist">
      <el-form-item label="古艺术家">
        <el-input @keyup.native.enter="search" placeholder="古艺术家关键字" v-model="name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">古艺术家列表</el-divider>
    <!-- 表格形式 -->
    <div v-if="artistData.result && artistData.result.length != 0" class="artistList">
      <el-table :data="artistData.result" stripe>
        <el-table-column label="图片" width="200px" align="center">
          <template slot-scope="scope">
            <!-- <div :style="{background:`url(${scope.row.icon})` }" class="avatar"></div> -->
            <el-image style="width: 100px; height: 140px" :src="scope.row.icon" :fit="fill"></el-image>
            <!-- <img height="120px" :src="scope.row.icon" alt=""> -->
          </template>
        </el-table-column>
        <el-table-column prop="p_names" label="姓名" align="center"></el-table-column>
        <el-table-column prop="age" label="生-死" align="center"></el-table-column>
        <el-table-column label="字" prop="deil" align="center"></el-table-column>
        <el-table-column prop="dynasty" label="朝代" align="center"></el-table-column>
        <el-table-column prop="count" label="介绍" align="center">
          <template slot-scope="scope">
            <div class="jieshao">{{ scope.row.count }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="$router.push(`/home/yishuUpdate/${scope.row.p_id}`)" icon="el-icon-edit"></el-button>
            <el-button @click="del(scope.row.p_id)" type="danger" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px;" background layout="->, total, prev, pager, next, jumper"
        :total="artistData.pageCount" :page-size="artistData.pageSize" :current-page="artistData.nowpage"
        @current-change="changeCurrentPage($event)">
      </el-pagination>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<script>
import Artist from "@/components/Artist.vue";
import httpApi from "@/http/index.js";
export default {
  components: { Artist },
  data() {
    return {
      fill:"fit",
      artistData:
      {
        nowpage: 1,
        pageSize: 3,
        pageCount: 0,
        result: []
      },
      // 电影查询结果   
      keyword: "",
      name: ""
    };
  },
  methods: {
    //查询所有艺术家信息
    listArtists(nowpage) {
      let params = { nowpage, pageSize: 3 }
      httpApi.artist.queryAllArtist(params).then((res) => {
        // console.log(res);
        this.artistData = res.data.data;
        // console.log(this.artist);
      });
    },
    listArtistByName(nowpage) {
      // 模糊查询所有艺术家信息\\
      let params = { name: this.name, nowpage, pageSize: 3 };
      httpApi.artist.queryArtistByName(params).then((res) => {
        // console.log(res);
        this.artistData = res.data.data;
      });
    },
    search() {
      this.keyword = this.name
      if (this.keyword.trim() != "") {
        this.listArtistByName(1)
      } else {
        this.listArtists(1)
      }
    },
    //页码变化时执行
    changeCurrentPage(nowpage) {
      if (this.keyword) {
        this.listArtistByName(nowpage)
      } else {
        this.listArtists(nowpage)
      }
    },
    //删除行
    del(id) {
      this.$confirm('正在永久删除该信息，确认继续吗？', '警告', {
        confirmButtonText: '残忍删除',
        cancelButtonText: '我再想想',
        type: 'warning'
      }).then(() => {
        httpApi.artist.deleteArtist({ id }).then(res => {
          // console.log('删除的id', id);
          // console.log('删除的结果', res);
          this.$message({
            type: 'success',
            message: '删除成功！'
          });
          //判断删除后数组里是否还有数据
          if (this.artistData.result.length == 1 && this.artistData.nowpage > 1) {
            //本页若无数据且不是第一页，则跳转到上一页
            this.changeCurrentPage(this.artistData.nowpage - 1)
          } else {
            //反之更新本页数据
            this.changeCurrentPage(this.artistData.nowpage)
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        });
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.yishujia {
  height: 570px;
  overflow: scroll;
}

.jieshao {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.avatar {
  width: 100px;
  height: 120px;
  background-size: contain;
}
.artistList{
  height: 500px;
  overflow: scroll;
}
</style>
